﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>sync的用法</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script src="../js/jquery-2.2.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<h1>sync的用法</h1><br/>

<div id="app">
    {{name}}<br/>
    <p>父传子通过props传递，子传父通过通知来传递，也就是发布订阅$emit</p>
    <p>定义：观察者模式又叫发布-订阅模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。</p>
    <p>父亲绑定一些事件,儿子触发这个事件  将参数传递过去  单向数据流，父亲数据刷新 儿子跟着刷新</p>
    <p>儿子想改父亲的数据需要告诉父亲，父亲改完儿子自动就刷新了</p>
    <p>父亲:{{money}}</p>
    <!--<child :m="money" @bind-thing="things"></child>--><!--绑定一个自定义事件叫bind-thing-->
    <child :m.sync="money"></child><!--语法糖，等价于之前写在methods里-->
</div>
<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>

<script>
    var app = new Vue({
        el:'#app',
        data:{
            name:'模版数据',
            money:400
        },
        components:{
            child:{
                props:['m'],
                methods:{
                    getMoney(){
                        this.$emit('update:m',800);//触发自己的自定义事件 bind-thing让父组件执行things方法
                    }
                },
                template:'<div>儿子:{{m}}<button @click="getMoney">多要钱</button></div>'
            }
        }
    });
</script>

</body>
</html>